<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人主页</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        body{background-color: #eeedf3;}
        .user{background-color: #ffc10c;padding: 30px 0;}
        .user .face{margin: 0 auto;position: relative;width: 80px;height: 80px;border-radius: 80px;background-size: cover;background-position: center;}
        .user .face input{display: block;width: 100%;height: 100%;opacity: 0;}
        .user .login{text-align: center;}
        .user .login a{margin: 10px auto 0;display: block;color: #ffc10c;font-size: 14px;border-radius: 4px;
            width: 60px;line-height: 20px;background-color: #fff;}
        .user .username{font-size: 16px;line-height: 20px;text-align: center;margin-top: 10px;}

        .mid-btn{display: -webkit-box;display: box;padding: 8px 0;border-bottom: 3px solid #eeedf3;background-color: #fff;}
        .mid-btn a{display: block;-webkit-box-flex: 1;box-flex: 1;color: #333;text-align: center;line-height: 35px;}
        .mid-btn a:first-child{border-right: 1px solid #eeedf3;}
        .mid-btn a i{font-size: 20px;margin-right: 4px;}
        .mid-btn a .icon-renwu{color: #43b36a;}
        .mid-btn a .icon-renminbi{color: #f4bc20;}

        .list{background-color: #fff;}
        .list ul{}
        .list ul li{padding: 10px 15px;position: relative;}
        .list ul li a{overflow: hidden;display: block;line-height: 26px;}
        .list ul li a .left{float: left;color: #333;}
        .list ul li a .left i{margin-right: 15px;font-size: 22px;}
        .list ul li:nth-child(1) a .left i{color: #3eb8ac;}
        .list ul li:nth-child(2) a .left i{color: #f4bc20;}
        .list ul li:nth-child(3) a .left i{color: #03ba9e;}
        .list ul li:nth-child(4) a .left i{color: #e9850c;}
        .list ul li:nth-child(5) a .left i{color: #ec6a56;}
        .list ul li:nth-child(6) a .left i{color: #43a7df;}
        .list ul li:nth-child(7) a .left i{color: #d71618;}
        .list ul li:nth-child(8) a .left i{color: #f4bc20;}
        .list ul li:nth-child(9) a .left i{color: #aea4e9;}
        .list ul li:nth-child(10) a .left i{color: #717171;}
        .list ul li a .right{float: right;}
        .list ul li a .right i{color: #999;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<div class="content">
    <!--未登录-->
    <div class="user">
        <div class="face" style="background-image: url('../img/pic_user.png')"></div>
        <div class="login">
            <a href="../html/login.html">登录</a>
        </div>
    </div>
    <!--已登录-->
    <!--<div class="user">-->
        <!--<div class="face" style="background-image: url('../img/pic_user.png')">-->
            <!--<input id="file" type="file" accept="image/jpeg,image/jpg,image/png"/>-->
        <!--</div>-->
        <!--<div class="username">莱昂纳多</div>-->
    <!--</div>-->
    <div class="mid-btn">
        <a href="../html/my_task.html"><i class="iconfont icon-renwu"></i>我的任务</a>
        <a href="../html/my_money.html"><i class="iconfont icon-renminbi"></i>我的资产</a>
    </div>
    <div class="list">
        <ul>
            <li class="bottom-line">
                <a href="../html/user_info.html">
                    <span class="left"><i class="iconfont icon-user"></i>个人资料</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/vip_center.html">
                    <span class="left"><i class="iconfont icon-iconfonticon"></i>出租人发布</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/published_task.html">
                    <span class="left"><i class="iconfont icon-nengli"></i>雇主的发布</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/account_manage.html">
                    <span class="left"><i class="iconfont icon-zhanghaoguanli"></i>账户管理</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/mall.html">
                    <span class="left"><i class="iconfont icon-jifenshangcheng"></i>积分商城</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/verified.html">
                    <span class="left"><i class="iconfont icon-certification"></i>实名认证</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/my_collect.html">
                    <span class="left"><i class="iconfont icon-star"></i>我的收藏</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/my_evaluate.html">
                    <span class="left"><i class="iconfont icon-haoping1"></i>我的评价</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/daily_task.html">
                    <span class="left"><i class="iconfont icon-renwu1"></i>每日任务</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
            <li class="bottom-line">
                <a href="../html/setting.html">
                    <span class="left"><i class="iconfont icon-shezhi"></i>设置</span>
                    <span class="right"><i class="iconfont icon-arrow_right"></i></span>
                </a>
            </li>
        </ul>
    </div>
</div>
    <footer class="footer">
        <div class="footer-fixed">
            <div class="foot-bar">
                <a href="../html/index.html">
                    <div>
                        <i class="iconfont icon-home"></i>
                    </div>
                    <p>首页</p>
                </a>
                <a href="../html/task.html">
                    <div>
                        <i class="iconfont icon-renwu"></i>
                    </div>
                    <p>任务</p>
                </a>
                <a href="javascript:void(0);" class="center">
                    <div>
                        <div class="plus">
                            <i class="iconfont icon-plus"></i>
                        </div>
                    </div>
                    <p>发布</p>
                </a>
                <a href="../html/show.html">
                    <div>
                        <i class="iconfont icon-faxian-copy-copy"></i>
                    </div>
                    <p>发现</p>
                </a>
                <a href="javascript:void(0);" class="active">
                    <div>
                        <i class="iconfont icon-user"></i>
                    </div>
                    <p>我</p>
                </a>
            </div>
            <div class="two-btn">
                <a href="../html/publish_want.html">雇主发布</a>
                <a href="../html/add_service.html">出租人发布</a>
            </div>
        </div>
    </footer>
</body>
<script>
    $('.center .plus').click(function(){
        $('.two-btn').slideToggle();
        if($(this).hasClass('plus-active')){
            $(this).removeClass('plus-active');
            $(this).css({'transform':'rotate(0deg)'});
            $('.content').removeClass('filter');
        }else{
            $(this).addClass('plus-active');
            $(this).css({'transform':'rotate(45deg)'});
            $('.content').addClass('filter');
        }
    });
</script>
<script>
    function checkBrowser(){
        var browser=navigator.appName;
        var b_version=navigator.appVersion;
        var version=b_version.split(";");
        var trim_Version=version[1].replace(/[ ]/g,"");
        if(browser=="Microsoft Internet Explorer" &&
                trim_Version=="MSIE6.0" ||
                trim_Version=="MSIE7.0" ||
                trim_Version=="MSIE8.0" ||
                trim_Version=="MSIE9.0"){
            return true
        }
    }
    var file = document.getElementById('file');
    file.addEventListener('change',function(){
        var fileType = file.value;
        var obj = document.getElementsByClassName('face')[0];
        if(fileType.length > 1 && fileType ) {
            var ldot = fileType.lastIndexOf(".");
            var type = fileType.substring(ldot + 1);
//过滤其它格式的文件
            if(type == "jpg" || type == "png" || type == "jpeg"){
                var isIe = checkBrowser();
                if(isIe){
                    var url = this.value;
                    url = url.replace(/\\/g,'/');
                    obj.style.backgroundImage = ('url("'+url+'")');
                }else{
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(e) {
                        var imgUrl = e.target.result;
                        obj.style.backgroundImage = ('url("'+imgUrl+'")');
                    };
                }
            }else{
//清空选择的非法文件
                file.value = "";
                obj.style.backgroundImage = ('url("../img/pic_user.png")');
                setTimeout(function(){
                    alert("请上传图片类型为 jpg、png、jpeg的图片！")
                },500);
            }
        }else{
            var isSelect = document.getElementById("file").value;
            if(isSelect == "" || isSelect == null){
                obj.style.backgroundImage = ('url("../img/pic_user.png")');
            }
        }
    });
</script>
</html>